<template>
  <div class="px-5 py-20 sm:py-32">
    <div class="form-container">
      <div class="flex items-center justify-center">
        <common-link path="/"
          class="go-home">
          <span class="sr-only">Toolify</span>
          <img class="h-8 w-auto sm:h-11"
            src="@/static/images/logo.png"
            alt="Toolify logo" />
        </common-link>
      </div>
      <div class="mt-11">
        <h1 class="text-gray-1000 font-semibold title break-words text-center">{{$t('resetPassword')}}</h1>

        <div class="form mt-10">
          <el-form :model="form"
            :rules="rules"
            ref="form">
            <el-form-item :label="$t('email')"
              prop="email">
              <el-input v-model="form.email"
                :placeholder="$t('pleaseEnterYourEmailAddress')"
                @keyup.enter.native="submitForm"></el-input>
            </el-form-item>
            <el-form-item class="mt-6">
              <el-button type="primary"
                :loading="loading"
                @click.native.prevent="submitForm"
                class="w-full h-11 to-sendPasswordResetLink">{{$t('sendPasswordResetLink')}}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex justify-center mt-7">
          <common-language :has-border="false"></common-language>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isEmail } from '@/plugins/validate'
import { mapState } from 'vuex'
export default {
  name: 'forgetPassword',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  async asyncData({ app, route, params, query, $axiosApi, store }) {
    let pageDesc = app.$cookies.get('pageDesc')
    try {
      let [langRes] = await Promise.all([await $axiosApi.getLanguagesMul()])

      let description
      let curLocale = store.state.locale
      if (
        langRes.code === 200 &&
        langRes.data &&
        langRes.data.languages &&
        langRes.data.languages.description &&
        langRes.data.languages.description.length > 0 &&
        langRes.data.languages.description[0].content &&
        (langRes.data.languages.description[0].content[curLocale] ||
          langRes.data.languages.description[0].content.default)
      ) {
        if (langRes.data.languages.description[0].content[curLocale]) {
          description = langRes.data.languages.description[0].content[curLocale]
        } else {
          description = langRes.data.languages.description[0].content.default
        }

        app.$cookies.set('pageDesc', description, {
          maxAge: 60 * 60 * 24 * 7,
          path: '/',
        })
      } else if (pageDesc) {
        description = pageDesc
      }

      return {
        description,
      }
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    var validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$i18n.t('pleaseEnterYourEmailAddress')))
      } else if (!isEmail(value)) {
        callback(new Error(this.$i18n.t('pleaseInputAValidEmail')))
      } else {
        callback()
      }
    }
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
      form: {
        email: '',
      },
      rules: {
        email: [
          {
            required: true,
            message: this.$i18n.t('pleaseEnterYourEmailAddress'),
            trigger: 'blur',
          },
          {
            validator: validateEmail,
            trigger: 'blur',
          },
        ],
      },
      loading: false,
      description: null,
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            const res = await this.$axiosApi.forgotPassword({
              email: this.form.email,
            })

            this.loading = false
            if (res && res.code === 200) {
              this.$router.push({
                name:
                  this.locale === 'en'
                    ? 'forgetPassword-sendSuccess'
                    : 'lang-forgetPassword-sendSuccess',
                query: {
                  email: this.form.email,
                },
              })
            } else {
              //this.$message.error(res.message)
            }
          } catch (error) {
            this.loading = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
<style lang='scss' scoped>
.form-container {
  max-width: 435px;
  margin: 0 auto;

  .title {
    font-size: 28px;
  }

  ::v-deep .el-divider--horizontal {
    .el-divider__text {
      color: #666;
    }
  }
  ::v-deep .form {
    .el-form-item__label {
      font-weight: 600;
      line-height: 16px;
      margin-bottom: 12px;
    }
    .el-form-item {
      margin-bottom: 20px;
    }

    .el-checkbox__inner {
      width: 18px;
      height: 18px;
      &::after {
        left: 5px;
        width: 4px;
        height: 9px;
      }
    }
    .el-checkbox__label {
      color: #666666;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #7150e6;
    }
    .el-form-item__error {
      font-size: 14px;
    }
  }

  ::v-deep .el-dropdown {
    font-size: 16px;
    color: rgba($color: #000000, $alpha: 0.8);
    .el-dropdown-link {
      white-space: nowrap;
      font-size: 16px;
      svg {
        font-size: 18px;
        fill: #2f3032;
        margin-right: 8px;
      }
      &:hover {
        color: #7150e6;
        .el-icon--right {
          color: #7150e6;
        }
        svg {
          fill: #7150e6;
        }
      }
    }
  }
}
</style>
